<template>
	<view class="container">
		<uni-segmented-control :current="currentIndex" :values="items" style-type="text" active-color="#007aff"
			@clickItem="onClickItem" />
			<view v-if="currentIndex === 0">
				<view style="padding: 10px;"></view>
				<view v-for="(item, idx) in list">
					<view class="card" @click="onclickNotification(idx)" v-if="item.sta == 0">
						<view class="card-title">
							<uni-row>
								<uni-col :span="16">
									<view style="font-weight: bold;">
										<uni-tag text="已读" size="mini" type="default" v-if="item.sta == 1"></uni-tag>
										<uni-tag text="未读" size="mini"  type="error" v-if="item.sta == 0"></uni-tag>
										{{item.title}}
									</view>
								</uni-col>
								<uni-col :span="8">
									<view style="text-align: right;color: #999999;">{{getFormatedTimeStr(item.createTime)}}
									</view>
								</uni-col>
							</uni-row>
						</view>
						<view class="card-body">
							<text>
								{{item.content.replace(/<br>/g, '\n')}}<br>
							</text>
						</view>

					</view>
					<view style="padding-bottom: 10px;" v-if="item.sta == 0"></view>
				</view>
			</view>
			<view v-if="currentIndex === 1">
				<view style="padding: 10px;"></view>
				<view v-for="(item, idx) in list">
					<view class="card" @click="onclickNotification(idx)" v-if="item.sta == 1">
						<view class="card-title">
							<uni-row>
								<uni-col :span="16">
									<view style="font-weight: bold;">
										<uni-tag text="已读" size="mini" type="default" v-if="item.sta == 1"></uni-tag>
										<uni-tag text="未读" size="mini"  type="error" v-if="item.sta == 0"></uni-tag>
										{{item.title}}
									</view>
								</uni-col>
								<uni-col :span="8">
									<view style="text-align: right;color: #999999;">{{getFormatedTimeStr(item.createTime)}}
									</view>
								</uni-col>
							</uni-row>
						</view>
						<view class="card-body">
							<text>
								{{item.content.replace(/<br>/g, '\n')}}<br>
							</text>
						</view>
						
					</view>
					<view style="padding-bottom: 10px;" v-if="item.sta == 1"></view>
				</view>
			</view>

		<!-- <view v-for="(item, idx) in list">
			<uni-card :title="item.title" :extra="getFormatedTimeStr(item.createTime)" @click="onclickNotification(idx)">
				<text class="uni-body">{{item.content}}</text>
				<br/>
				<text class="unread" v-if="item.sta == 0">未读</text>
				<text class="readed" v-if="item.sta == 1">已读</text>
			</uni-card>
		</view> -->

		<uni-load-more :status="moreStatus"></uni-load-more>
	</view>
</template>

<script>
	import {
		websock
	} from '../../net/websock'
	import moment from 'moment'

	export default {
		data() {
			return {
				list: [],
				moreStatus: 'more',
				currentIndex: 0,
				items: ['未读消息', '已读消息'],
			}
		},
		onReady() {
			console.log('notification on ready')
			this.getOlderNotification()
		},
		onShow() {
			console.log('notification on show')
			// this.getUnreadNotificationCnt()
		},
		onLoad() {
			console.log('notification on load')
			uni.$on('NOTIFICATION-NEW', this.notificationNew)
		},
		onUnload() {
			console.log('notification on unload')
			uni.$off('NOTIFICATION-NEW', this.notificationNew)
		},
		// 下拉刷新，获取最新的数据
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			this.getNewestNotification()
		},
		// 上拉刷新，获取历史数据
		onReachBottom() {
			console.log('onReachBottom')
			this.getOlderNotification()
		},
		methods: {
			onClickItem(e) {
				if (this.currentIndex !== e.currentIndex) {
					this.currentIndex = e.currentIndex
				}
			},
			// 获取最新的通知
			async getNewestNotification() {
				try {
					if (this.list.length == 0) {
						let res = await websock.getNotificationList({
							pageCount: 20
						})
						console.log('getNotificationList list empty', res)
						uni.stopPullDownRefresh()
						this.list = [...res, ...this.list]
					} else {
						let res = await websock.getNotificationList({
							greaterThan: this.list[0].id,
							pageCount: 20
						})
						console.log('getNotificationList list not empty', res)
						uni.stopPullDownRefresh()
						this.list = [...res, ...this.list]
					}
				} catch (e) {
					uni.showToast({
						title: e.message
					})
				}
			},
			// 获取老的数据
			async getOlderNotification() {
				this.moreStatus = 'loading'
				try {
					if (this.list.length == 0) {
						console.log('before get list empty')
						let res = await websock.getNotificationList({
							pageCount: 20
						})
						console.log('getOlderNotification list empty', res)
						this.list = [...this.list, ...res]
						if (res.length < 20) {
							this.moreStatus = 'noMore'
						} else {
							this.moreStatus = 'more'
						}
					} else {
						console.log('before get list not empty')
						let res = await websock.getNotificationList({
							lessThan: this.list[this.list.length - 1].id,
							pageCount: 20
						})
						console.log('getOlderNotification list not empty', res)
						this.list = [...this.list, ...res]
						if (res.length < 20) {
							this.moreStatus = 'noMore'
						} else {
							this.moreStatus = 'more'
						}
					}
				} catch (e) {
					uni.showToast({
						title: e.message
					})
				}
			},
			// 新通知
			notificationNew() {
				this.getNewestNotification()
			},
			// 阅读通知
			async readNotification(id) {
				try {
					await websock.readNotification({
						id
					})
					for (let i = 0; i != this.list.length; i++) {
						if (this.list[i].id == id) {
							this.list[i].sta = 1
							break
						}
					}
				} catch (e) {
					uni.showToast({
						title: e.message
					})
				}
			},
			getTypeStr(typ) {
				if (typ == 1) {
					return '请假审批'
				}
				return ''
			},
			// 获取格式化时间字符串
			getFormatedTimeStr(stamp, str='MM-DD HH:mm:ss') {
				return moment(stamp).format(str)
			},
			// 点击通知卡片页
			onclickNotification(idx) {
				// console.log('onclickNotification', idx)
				if (this.list[idx].sta == 0) {
					this.readNotification(this.list[idx].id)
				}
				if (this.list[idx].typ == 0) { // 请假
					uni.navigateTo({url: `/pages/task/qingjiaApplyDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				} else if(this.list[idx].typ == 1) { // 出差
					uni.navigateTo({url: `/pages/task/chuchaiApplyDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				} else if(this.list[idx].typ == 2) { // 加班
					uni.navigateTo({url: `/pages/task/jiabanApplyDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				} else if(this.list[idx].typ == 3) { // 入职
					uni.navigateTo({url: `/pages/task/ruzhiApplyDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				} else if (this.list[idx].typ == 4) { // 转正
					uni.navigateTo({url: `/pages/task/zhuanzhengApplyDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				} else if (this.list[idx].typ == 5) { // 离职
					uni.navigateTo({url: `/pages/task/lizhiApplyDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				}else if (this.list[idx].typ == 6) { // 督办单
					uni.navigateTo({url: `/pages/task/dubanApplyDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				}else if (this.list[idx].typ == 7) { // 会议室
					uni.navigateTo({url: `/pages/task/meetingroomApplyDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				}else if (this.list[idx].typ == 8) { // 接待单
					uni.navigateTo({url: `/pages/task/jiedaiApplyDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				}else if (this.list[idx].typ == 9) { // 加油
					uni.navigateTo({url: `/pages/task/jiayouApplyDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				}else if (this.list[idx].typ == 10) { // 用车
					uni.navigateTo({url: `/pages/task/yongcheApplyDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				}else if (this.list[idx].typ == 11) { // 用印
					uni.navigateTo({url: `/pages/task/yongyinApplyDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				}else if (this.list[idx].typ == 12) { // 督办任务 督办通过之后创建
					uni.navigateTo({url: `/pages/task/lizhiApplyDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				}else if (this.list[idx].typ == 13) { // 物资采购
					uni.navigateTo({url: `/pages/task/caigouApplyDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				}else if (this.list[idx].typ == 14) { // 物资领用
					uni.navigateTo({url: `/pages/task/wuzilingyongDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				}else if (this.list[idx].typ == 15) { // 合同
					uni.navigateTo({url: `/pages/task/hetongShenpiDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				}else if (this.list[idx].typ == 16) { // 招标
					uni.navigateTo({url: `/pages/task/zhaobiaoShenheDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				}else if (this.list[idx].typ == 17) { // 传阅文件
					uni.navigateTo({url: `/pages/task/chuanyueWenjianDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				}else if (this.list[idx].typ == 18) { // 公文流转
					uni.navigateTo({url: `/pages/task/gongwenLiuzhuanDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				}else if (this.list[idx].typ == 19) { // 补卡申请
					uni.navigateTo({url: `/pages/task/bukaApplyDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				}else if (this.list[idx].typ == 20) { // 会议通知
					uni.navigateTo({url: `/pages/task/huiyiTongzhiDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				}else if (this.list[idx].typ == 21) { // 工作通知
					uni.navigateTo({url: `/pages/task/gongzuoTongzhiDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				}else if (this.list[idx].typ == 22) { // 排班通知
					uni.navigateTo({url: `/pages/task/paibanDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				}else if (this.list[idx].typ == 23) { // 内部发文
					uni.navigateTo({url: `/pages/task/neibuFawenDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`})
				}else if (this.list[idx].typ == 24) { // 新建事项
					uni.navigateTo({url: `/pages/task/xinjianfawenDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}&ta=1`})
				}else if (this.list[idx].typ == 25) { // 宣传报道
					uni.navigateTo({url: `/pages/task/xuanchuanbaodaoDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}&ta=1`})
				}else if (this.list[idx].typ == 26) { // 工作餐
					uni.navigateTo({url: `/pages/task/gongzuocanDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}&ta=1`})
				}

				// uni.navigateTo({
				// 	url: '/pages/notification/detail?id=' + this.list[idx].id
				// })
			},
			async getUnreadNotificationCnt() {
				try {
					let cnt = await websock.getUnreadNotificationCnt()
					if (cnt == 0) {
						uni.removeTabBarBadge({
							index: 0
						})
					} else if (cnt > 99) {
						uni.setTabBarBadge({
							index: 0,
							text: '99+'
						})
					} else {
						uni.setTabBarBadge({
							index: 0,
							text: cnt + ''
						})
					}
				} catch (e) {
					uni.showToast({
						title: e.message
					})
				}
			}
		}
	}
</script>

<style>
	@import url("../common/common.css");
</style>
